<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="jquery-ui-1.10.2/themes/base/jquery-ui.css"/>
		<script src="jquery-ui-1.10.2/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="jquery-ui-1.10.2/ui/jquery-ui.js" type="text/javascript" charset="utf-8"></script>
		
		<style type="text/css">
			#accordion{
				width: 600px;
			}
		</style>
	</head>
	<body>
		<div id="accordion">
		  <!--<h3>部分 1</h3>
		  <div>
		    <p>
		    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
		    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
		    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
		    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
		    </p>
		  </div>-->
		</div>
		
		<script type="text/javascript">
			var arr=[
				{"name":"红烧排骨","content":"红烧排骨，是一道常见菜肴。以猪排骨、杏鲍菇作为主要食材，以干辣椒、花椒、八角、丁香、姜片、盐、老抽、生抽、料酒、冰糖等作为辅料制作而成。炒糖。这是影响红烧成品颜色的关键一步。炒锅刷净放入底油少许，无需油热， 直接放白糖1-3勺，小火不断炒拌至糖融化转至棕红色，糖液翻起棕红色泡沫，继续翻炒，片刻后泡沫增多颜色变浅转呈金红色，这时糖才算炒好。然后可以加水煮开再加入排骨中，也可直接把炒好的糖“刺啦”一声浇在高压锅里的排骨上"},
				{"name":"清蒸鲶鱼","content":"清蒸鲶鱼是鲶鱼、油豆腐、蒜姜片由等作为主要食材，料酒、酱油、甜面酱等作为主要调料所做成的一道菜品。该道菜品是通过清蒸的做法制作而成的。鲶鱼富含蛋白质和脂肪，对体弱虚损、营养不良之人有较好的食疗作用。另外，它也是产后滋补和催乳的佳品，并有滋阴养血、补中气、开胃、利尿的作用。采用清蒸进行烹饪，不仅避免了土腥味和油腻感，而且还保留了淡水鱼的鲜美，营养价值也不会遭到破坏。同时，鲶鱼刺少，肉质细嫩，易消化，比较最适合老人和儿童食用。"},
				{"name":"鱼香肉丝","content":"鱼香肉丝是一道著名川菜，其咸鲜酸甜兼备，葱姜蒜香浓郁，其味是调味品调制而成，此法源出于四川民间独具特色的烹鱼调味方法，而今已广泛用于川味的熟菜中。一是选材。 里脊肉是首选,吃起来较为鲜嫩。泡椒下锅前细细剁碎，这样才能炒出鲜亮的红油。二是火候。炒鱼香肉丝要猛火快炒，火要够大，锅气要足,这样炒出的菜味自然不赖。三是比例。鱼香肉丝讲究见油不见汤”，鱼香汁的调料比例要拿捏好。姜蒜要剁碎，同泡椒一起下锅炒到香酥，炒出辛香味，同时让人吃到嘴里后又不觉辛辣。"}
			];
			
			arr.forEach(val=>{
				var h3=$(`<h3>${val.name}</h3>`);
				$("#accordion").append(h3);
				var div=$(`<div><p>${val.content}</p></div>`);
				$("#accordion").append(div);
			})
			
//			$( "#accordion" ).accordion();
			$.event.special.hoverintent = {
		    setup: function() {
		      $( this ).bind( "mouseover", jQuery.event.special.hoverintent.handler );
		    },
		    teardown: function() {
		      $( this ).unbind( "mouseover", jQuery.event.special.hoverintent.handler );
		    },
		    handler: function( event ) {
		      var currentX, currentY, timeout,
		        args = arguments,
		        target = $( event.target ),
		        previousX = event.pageX,
		        previousY = event.pageY;
		 
		      function track( event ) {
		        currentX = event.pageX;
		        currentY = event.pageY;
		      };
		 
		      function clear() {
		        target
		          .unbind( "mousemove", track )
		          .unbind( "mouseout", clear );
		        clearTimeout( timeout );
		      }
		 
		      function handler() {
		        var prop,
		          orig = event;
		 
		        if ( ( Math.abs( previousX - currentX ) +
		            Math.abs( previousY - currentY ) ) < 7 ) {
		          clear();
		 
		          event = $.Event( "hoverintent" );
		          for ( prop in orig ) {
		            if ( !( prop in event ) ) {
		              event[ prop ] = orig[ prop ];
		            }
		          }
		          // 防止访问原始事件，因为新事件会被异步触发，旧事件不再可用 (#6028)
		          delete event.originalEvent;
		 
		          target.trigger( event );
		        } else {
		          previousX = currentX;
		          previousY = currentY;
		          timeout = setTimeout( handler, 100 );
		        }
		      }
		 
		      timeout = setTimeout( handler, 100 );
		      target.bind({
		        mousemove: track,
		        mouseout: clear
		      });
		    }
		  };
					
			$( "#accordion" ).accordion({
		      event: "click hoverintent"
		    });
		</script>
	</body>
</html>
